<html>
<wicket:head>
  <title wicket:id="title">[Title]</title>
  <style>
  #image_map{
      width:1000px;
      height:146px;
      position:relative;
  }
  
.expand-down {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  margin-top:0px;
  height:120px;
  width:438px;
  margin-bottom:0px;
}
.expand-down * {
  margin: 0;
  padding: 2;
}
.expand-down ul {
  padding-top:0px;
  margin-left:0px;
}
.expand-down ul li {
  float:left;
  list-style-type:none;
}
.expand-down ul li a {
    text-decoration:none;
}
.expand-down ul li a img {
  width:90px;
  height:90px;
  border:none;
}
.expand-down ul li a span {
  display:none;
}
.expand-down ul li:hover a span {
  display:block;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.expand-down ul li:hover a img {
  width:90px;
  height:90px;
}
.expand-down ul li:hover + li a img {
  width:90px;
  height:90px;
}
.expand-down ul li:hover + li + li a img {
  width:90px;
  height:90px;
}

.expand-up {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  height:150px;
  width:450px;
  overflow:visible;
  margin-bottom:30px;
}
.expand-up * {
  margin: 0;
  padding: 0;
}
.expand-up ul {
  margin-left:10px;
}
.expand-up ul li {
  float:left;
  list-style-type:none;
  padding-top:65px;
  margin-top:25px;
}
.expand-up ul li a {
  text-decoration:none;
}
.expand-up ul li a img {
  width:50px;
  height:50px;
  border:none;
}
.expand-up ul li a span {
  display:none;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.expand-up ul li:hover a span {
  display:block;
  margin-top:-65px;
}
.expand-up ul li:hover a img {
  width:100px;
  height:100px;
}
.expand-up ul li:hover + li a img {
  width:60px;
  height:60px;
  margin-top:-10px;
}
.expand-up ul li:hover + li + li a img {
  width:55px;
  height:55px;
  margin-top:-5px;
}

  </style>
  
</wicket:head>

<body>
  <div class="container" style="position:relative;width:1000px; height:730px"> 
      <div class="span-22 last" style="width:1000px; height:600px;">
      <wicket:child>Example text for the child element area.</wicket:child>
      </div>
      <div style="position: relative; background-color:#2D475C" class="span-22 last" id="image_map">
         <img wicket:id="widget" src="widget.png" style="position:absolute; left: 30px;top:20px"/>     
         <span wicket:id="clock" style="color: #FFF; position: absolute; bottom: 52; left: 303px;">[clock]</span>
         <div class="expand-down" style= "position: absolute; right:50;top:5px">
            <form id="dummy" action="" method="post">
            <fieldset style="border:0px;">
            <legend><font size=1 color="#FFFFFF">System Controls</font></legend>
            <ul>
                <li>
                    <a wicket:id="HomePageLink" href="#" title="Energy"/>
                        <img wicket:id="m1" src="m1_active.png" alt="Energy" title="Energy" />
                        <span>Energy</span>
                </li>
                <li>
                    <a wicket:id="UtilitesPageLink" href="#" title="Utilities"/>
                        <img wicket:id="m2" src="m2_active.png" alt="Valid XHtml" title="Utilities" />
                        <span>Utilites</span>
                </li>
                <li>
                    <a wicket:id="FormPageLink" href="#" title="Home"/>
                        <img wicket:id="m3" src="m3_active.png" alt="Home" title="Home" />
                        <span>Home</span>
                </li>
                <li>
                    <a wicket:id="SchedulerPageLink" href="#" title="Scheduler"/>
                        <img wicket:id="m4" src="m4_active.png" alt="Scheduler" title="Scheduler" />
                        <span>Scheduler</span>
                </li>    
           </ul>
           </fieldset>
           </form>
         </div>
      </div>
  </div>

</body>
</html>
